var ElectroplateOutOrder = function () {
  var template = /* html */ `
    <div class="electroplate-out-order">
      <template v-if="order.hasEle">
        <el-form-item label="电镀设置" v-if="colorList!==null">
          <template v-if="colorList.length>0">
            <table class="out-business-order-table" cellspacing="0" cellpadding="0">
              <colgroup>
                <col>
                <col width="120px">
                <col width="120px">
                <col width="120px">
              </colgroup>
              <thead>
                <tr>
                  <th>颜色</th>
                  <th>数量</th>
                  <th>计价数量</th>
                  <th>单价</th>
                </tr>
              </thead>
              <tbody>
                <template v-for="(color,index) in colorList">
                  <tr :key="'color_'+index">
                    <td colspan="4">
                      <span>
                        <span style="margin-right:15px">电镀物料:{{color.materialType}}</span>
                        <span>电镀色类型:</span>
                        <el-select v-if="color.canSelect" size="small" filterable v-model="color.selectElectroplate" value-key="type" @change="electroplateTypeChange(color)">
                          <el-option v-for="electroplate in color.electroplateList" :key="electroplate.type" :value="electroplate" 
                            :label="electroplate.type" style="width:220px;"></el-option>
                        </el-select>
                        <span v-else>{{color.selectElectroplate.type}}</span>
                      </span>
                    </td>
                  </tr>

                  <template v-for="(materialColor,colorIndex) in color.materialColorList">
                  <tr :key="'materialColor_'+index+'_'+colorIndex">
                    <td style="padding-left:15px">
                      <el-checkbox v-model="materialColor.checked" @change="eleColorChange(materialColor,'checked')">
                        {{materialColor.color}}
                      </el-checkbox>
                    </td>
                    <td>
                      <el-input-number v-model="materialColor.count" :min="1" :max="materialColor.maxCount" :precision="0" size="small" class="table-input" :controls="false" 
                        placeholder="数量" :disabled="!materialColor.checked" @change="eleColorChange(materialColor,'count')"></el-input-number>
                    </td>
                    <td>
                      <el-input-number is-decimal-zero v-model="materialColor.valuationCount" :min="1/Math.pow(10,precision)" :max="100000000-1/Math.pow(10,precision)" 
                        :precision="precision" size="small" class="table-input" :controls="false" placeholder="计价数量" :disabled="!materialColor.checked"
                        @change="eleColorChange(materialColor,'valuationCount')"></el-input-number>
                    </td>
                    <td>
                      <el-input-number is-decimal-zero v-model="materialColor.unitPrice" :min="0" :max="99999999.99" :precision="2" size="small" class="table-input" :controls="false" 
                        placeholder="单价" :disabled="!materialColor.checked" @change="eleColorChange(materialColor,'unitPrice')"></el-input-number>
                    </td>
                  </tr>
                  </template>
                </template>
              </tbody>
            </table>
          </template>
          <span v-else>没有物料可以电镀</span>
        </el-form-item>
        <el-form-item label="非电镀设置" v-if="colorList!==null&&materialDetailList.length>0">
          <material-out-order ref="materialOrder" :detail-list="materialDetailList" :order="order" :precision="precision"
            @select-group="selectGroup">
          </material-out-order>
        </el-form-item>
      </template>
    </div>
  `;

  return {
    props: {
      detailList: {
        type: Array,
        required: true
      },
      eleData: {
        type: Object,
        required: true
      },
      order: {
        type: Object,
        required: true
      },
      precision: Number
    },

    watch: {
      detailList: function () {
        this.setEleDetailList();
        this.setColorList();
      }
    },

    data: function () {
      return {
        eleDetailList: null,
        materialDetailList: [],
        colorList: null,
        electroplateList: [],
        hasFrame: false
      };
    },

    created: function () {
      this.setEleDetailList();
      this.setColorList();
    },

    methods: {
      setEleDetailList: function () {
        var order = this.order;
        if (order.maching === '' || (!order.canEle && !order.hasEle)) {
          this.eleDetailList = null;
          return;
        }

        var detailList = this.detailList;
        if (detailList.length === 0) {
          this.eleDetailList = [];
          this.colorList = [];
          return;
        }
        var eleDetailList = [],
          materialDetailList = [];
        for (var i = 0; i < detailList.length; i++) {
          var detail = detailList[i];
          var lineNo = detail.lineNo;
          if (lineNo === '-1') {
            eleDetailList.push(detail);
          } else {
            materialDetailList.push(detail);
          }
        }
        eleDetailList = _.cloneDeep(eleDetailList);
        this.eleDetailList = eleDetailList;
        this.materialDetailList = materialDetailList;
      },

      setColorList: function () {
        var eleDetailList = this.eleDetailList;
        if (eleDetailList === null) {
          this.colorList = null;
          return;
        }
        if (eleDetailList.length === 0) {
          this.colorList = [];
          return;
        }

        var maching = this.order.maching;
        if (maching === '') {
          this.colorList = [];
          return;
        }
        this.setElectroplateList();

        var materialTypeList = _.map(eleDetailList, function (obj) {
          return {
            materialType: obj.materialType,
            materialCode: obj.materialCode
          };
        });
        materialTypeList = _.uniqBy(materialTypeList, 'materialCode');
        var colorList = [];
        for (var i = 0; i < materialTypeList.length; i++) {
          var material = materialTypeList[i];
          var obj = {
            materialType: material.materialType,
            materialCode: material.materialCode,
            materialColorList: []
          };
          this.setMaterialElectroplate(obj);
          colorList.push(obj);
        }
        this.colorList = colorList;

        if (maching === 'all' || maching.indexOf('machineMap-') === 0) {
          this.hasFrame = true;
        } else {
          this.hasFrame = false;
        }
      },

      setMaterialElectroplate: function (obj) {
        var eleData = this.eleData;
        var eleColorObj = eleData.eleColorObj;
        var material = eleData.material;
        var electroplateList = this.electroplateList;
        var electroplateType = material[obj.materialType];
        if (electroplateType === undefined) {
          obj.canSelect = true;
          obj.electroplateList = electroplateList;
          if (electroplateList.length === 1) {
            obj.selectElectroplate = electroplateList[0];
          } else {
            obj.selectElectroplate = '';
          }
        } else {
          obj.canSelect = false;
          obj.electroplateList = [];
          obj.selectElectroplate = {
            type: electroplateType,
            colorList: eleColorObj[electroplateType]
          };
        }

        this.electroplateTypeChange(obj);
      },

      electroplateTypeChange: function (obj) {
        var order = this.order;
        var selectElectroplate = obj.selectElectroplate;
        if (selectElectroplate === undefined) {
          selectElectroplate = [];
        }
        var materialColorList = [];
        if (selectElectroplate !== '') {
          materialColorList = _.cloneDeep(selectElectroplate.colorList)
        }
        for (var i = 0; i < materialColorList.length; i++) {
          var materialColor = materialColorList[i];
          materialColor.maxCount = materialColor.count;
          materialColor.checked = false;
          materialColor.unitPrice = order.unitPrice;
          materialColor.valuationCount = materialColor.count;
        }
        obj.materialColorList = materialColorList;
      },

      setElectroplateList: function () {
        var eleColorObj = this.eleData.eleColorObj;
        var electroplateList = [];
        for (var key in eleColorObj) {
          electroplateList.push({
            type: key,
            colorList: eleColorObj[key]
          });
        }
        this.electroplateList = electroplateList;
      },

      getPostData: function () {
        var colorList = this.colorList;
        var colors = [];
        for (var i = 0; i < colorList.length; i++) {
          var color = colorList[i];
          var materialColorList = color.materialColorList;
          for (var j = 0; j < materialColorList.length; j++) {
            var materialColor = materialColorList[j];
            if (!materialColor.checked) {
              continue;
            }

            if (!this.checkValid(materialColor)) {
              return null;
            }

            var obj = {
              color: materialColor.color,
              count: materialColor.count,
              maching: color.materialType,
              materialCode: color.materialCode,
              rowIndex: '-1',
              unitPrice: materialColor.unitPrice,
              valuationCount: materialColor.valuationCount,
              additionalMaterialType: materialColor.materialType,
              additionalRowIndex: materialColor.lineNo,
              typeId: materialColor.lineNo
            };
            colors.push(obj);
          }
        }

        if (colors.length === 0) {
          this.$alert(i18n.getMsg('orderCirculation.createOutOrder.ele-colorList'));
          return null;
        }

        if (this.materialDetailList.length > 0) {
          var materialColors = this.$refs['materialOrder'].getPostData();
          if (materialColors !== null) {
            colors.pushArray(materialColors);
          }
        }

        return colors;
      },

      checkValid: function (materialColor) {
        var fields = ['count', 'valuationCount', 'unitPrice'];
        var nullField = CheckVaildUtil.checkNullField(fields, materialColor);
        if (nullField !== '') {
          var msg = i18n.getMsg(`orderCirculation.createOutOrder.ele-${nullField}`);
          this.$alert(msg, '信息');
          return false;
        }

        if (materialColor.unitPrice === 0) {
          var msg = i18n.getMsg(`orderCirculation.createOutOrder.ele-unitPriceZero`);
          this.$alert(msg, '信息');
          return false;
        }
        return true;
      },

      eleColorChange: function (materialColor, field) {
        var colorList = this.colorList;

        var lineNo = materialColor.lineNo;
        var value = materialColor[field];
        for (var i = 0; i < colorList.length; i++) {
          var color = colorList[i];
          var materialColorList = color.materialColorList;
          for (var j = 0; j < materialColorList.length; j++) {
            var obj = materialColorList[j];
            if (obj.lineNo !== lineNo) {
              continue;
            }
            obj[field] = value;
          }
        }

        if (this.materialDetailList.length > 0) {
          this.$refs['materialOrder'].toSelectGroup(lineNo, field, value);
        }
      },

      selectGroup: function (color, detailColor, field) {
        if (!color.hasCheck) {
          return;
        }

        var value = color[field];
        var lineNo = color.lineNo;
        var colorList = this.colorList;
        for (var i = 0; i < colorList.length; i++) {
          var eleColorObj = colorList[i];
          var materialColorList = eleColorObj.materialColorList;
          for (var j = 0; j < materialColorList.length; j++) {
            var materialColor = materialColorList[j];
            if (materialColor.lineNo === lineNo) {
              materialColor[field] = value;
            }
          }
        }
      }
    },

    components: {
      MaterialOutOrder: MaterialOutOrder(false)
    },

    template: template
  };
}();
